<template>
  <div class="content fullscreen" v-if="showPage">
    <div class="square-block">
      <div class="square-block-dummy"></div>
      <div class="square-block-box">
        <van-image :src="data.image" />
      </div>
    </div>
    <div class="download">
      <h2 class="download__tips">{{ data.title }}</h2>
      <div class="download__button" v-if="data.ios">
        <van-button :url="data.ios.link" round>{{ data.ios.text }}</van-button>
      </div>
      <div class="download__button" v-if="data.android">
        <van-button
          @click="download(data.android.link)"
          round
        >{{ data.android.text }}</van-button>
      </div>
    </div>
    <div class="guide-mask" @click="closeGuide" v-if="showGuide"></div>
  </div>
</template>

<script>
import { openApp } from '../../common/util'
import { Button, Image, Dialog } from 'vant'

export default {
  components: {
    [Image.name]: Image,
    [Button.name]: Button,
    [Dialog.name]: Dialog,
    openApp
  },
  data () {
    return {
      showPage: false,
      showGuide: false,
      data: null
    }
  },
  computed: {
    wechat () {
      let isWeiXin = () => {
        return (
          navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1
        )
      }
      if (isWeiXin()) {
        return true
      } else {
        return false
      }
    },
    device () {
      var ua = navigator.userAgent
      if (/(iPhone|iPad|iPod|iOS)/i.test(ua)) {
        return 'ios'
      } else if (/(Android|Adr)/i.test(ua)) {
        return 'android'
      }
      return ''
    }
  },
  created () {
    this.onLoad()
  },
  mounted () {
    openApp(res => {
      console.log('尝试打开APP')
    })
  },
  methods: {
    onLoad () {
      console.log(this.$route.query)
      this.axios
        .get('/app/download', {
          params: { device: this.device },
          headers: { openAuth: true, FastMode: true }
        })
        .then(response => {
          this.data = response.data
          this.showPage = true
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    download (link) {
      if (this.wechat) {
        this.showGuide = true
      } else {
        openApp(res => {
          location.href = link
        })
      }
    },
    closeGuide () {
      this.showGuide = false
    }
  }
}
</script>
<style lang="less" scoped>
.fullscreen {
  height: 100%;
  overflow: hidden;
  position: relative;
  background: #e8374b;
  .container {
    height: 100%;
  }
}

.square-block {
  margin: 0;
  width: 100%;
  &-dummy {
    margin-top: 120%;
  }
}

.download {
  text-align: center;
  &__tips {
    font-size: 15px;
    margin: 0 auto 15px;
    color: #fff;
  }
  &__button {
    text-align: center;
    .van-button {
      background: transparent;
      padding: 0 20px;
      border-color: #fff;
      color: #fff;
      text-transform: uppercase;
    }
  }
}
</style>
